<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索页面</title>
    <style>
        li {
            list-style: none;
            /* float: left; */
            margin-right: 15px;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            margin-left: 3%;
        }
        
        td {
            border: 1px dashed #b3b3b3;
            height: 40px;
            border-right: none;
            border-left: none;
        }
    </style>
</head>

<body>
    <ul>
        <form id="search_form">
            <li>
                <label for="">关键字</label>
                <input type="text" name="keyword" id="" placeholder="输入关键字">
                <label for="">上映日期</label>
                <input type="text" name="date" id="" placeholder="年/月/日">
                <input type="button" name="" id="inquire" value="查询>">
            </li>
        </form>
    </ul>
    <div class="nr">

    </div>
    <script src="__STATIC__/js/jquery-3.4.1.js"></script>
    <script>
        $(function() {
            //为查询按钮绑定点击事件
            $('#inquire').on("click", function(e) {
                //禁用查询的冒泡事件
                e.preventDefault();
                //利用ajax传递数据
                $.ajax({
                    type: "POST",
                    url: "{:url('index/search_do','','')}",
                    data: $('#search_form').serialize(),
                    success: function(result) {
                        if (result.code == 1) {
                            $('.nr').html("");
                            var str = `<table>`;
                            $.each(result.data, function(k, v) {
                                str += `<tr>
                                    <td>${v.movie_name}</td>
                                    <td>
                                        <span>上映时间:${v.release_time}</span>
                                        <span>上映日期:${v.release_date}</span>
                                        <span>上映影厅:${v.release_room}</span>
                                    </td>
                                    <td>￥:${v.movie_price}</td>
                                    <td>余票:${v.tickets}</td>
                                    <td>${v.url}</td>
                                </tr>`;
                            })
                            str += `</table>`;
                            $('.nr').append(str);
                        } else {
                            $('.nr').html("");
                            $('.nr').append(result.msg);
                        }
                    }
                });
            });
        });
    </script>
</body>

</html>